/* eslint-disable */
/**
/**
 * Created by GYL on 2018/7/25
 */
//新增知识库
import React, { Component } from 'react';
import MyModal from '../../../components/common/MyModal';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, Popconfirm, TreeSelect, Tag, Upload, Button, Alert } from 'antd';
import Util from '../../../utils/Util';
import MyIcon from '../../../components/common/MyIcon';
import config from '../../../config';
import moment from 'moment';
import myModalStyles from '../../../components/common/Mymodal.less';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import { message } from 'antd';
import PublicService from '../../../services/PublicService';
const FormItem = Form.Item;
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const { SHOW_CHILD } = TreeSelect;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1315525_quw7a5i25p.js',
});
class Add_zs extends Component {
    componentDidMount() {
        this.props.form.resetFields();//重置from表单所有值
        request({
            url: `/pm-web/projectmanage/eventbasicinfo/getUUID`,
            method: 'POST',
            data: {}
        }).then(data => {
            this.setState({
                pid: data.ret,
            })
        })
    }
    state = {

        dataSource: [],
        Edit_items: [],
        loading: false,
        arr: [
            {
                type: 'Upload',
                label: '',
                paramName: 'Upload',
            },

            {
                type: 'TextArea',
                paramName: 'repositoryName',
                id: 'repositoryName',
                title: '0/30',
                num: 30,
                key: "repositoryName",
                label: '知识库名称',
                rows: 1,
                rules: [{ ...config.reg.required }],
            },
            {
                type: 'TextArea',
                paramName: 'content',
                id: 'content',
                title: '0/250',
                num: 250,
                key: "content",
                label:
                    <div style={{
                        width: 100,
                        height: 30,
                        lineHeight: '30px',
                        // background: 'rgba(214,237,235,1)',
                        borderRadius: '2px 2px 0px 0px',
                        textAlign: 'center',

                    }}>
                        知识库内容&nbsp;
                        <Tooltip title="填写知识库详细信息或文件描述!">
                            <Icon type="question-circle-o" />
                        </Tooltip>
                    </div>
                ,
                rows: 2
            },


        ],
        columns: [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                render: (text, record, index) => {
                    return <span>
                        {index + 1}
                    </span>

                }
            },
            {
                title: '文件名',
                dataIndex: 'fileName',
                width: '20%',
                align: "center",
            },
            {
                title: '文件大小',
                width: '10%',
                dataIndex: 'fileSize',
                align: "center",
            },
            {
                title: '上传时间',
                width: '20%',
                dataIndex: 'createTime',
                align: "center",
                render: (text, record) => {
                    return <span>
                        {record.createTime ? moment(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '无'}
                    </span>

                }
            },
            {
                title: '上传人',
                width: '15%',
                dataIndex: 'uploadUser',
                align: "center",
            },
            {
                title: '操作',
                width: '10%',
                dataIndex: 'uploadUs123er',
                align: "center",
                render: (text, record) => {
                    return <span>
                        <Popconfirm
                            title="确定删除此条数据?"
                            onConfirm={this.Aconfirm.bind(this, record)}
                            onCancel={this.Acancel}
                            okText="是"
                            cancelText="否"
                        >
                            <a href="javascript:;" >删除</a>
                        </Popconfirm>
                    </span>

                }
            },
        ]
    };

    Aconfirm = (record) => {
        this.onDelete(record)
    }

    //删除上传文件
    onDelete = (record) => {
        // console.log(record)
        request({
            url: `/pm-web/projectmanage/fileupload/deleteFile?id=${record.id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc == 0) {
                message.success('删除成功');
                this.onsaveSc()


            }
        })
    }

    //查询上传附件
    onsaveSc = () => {
        request({
            url: `/pm-web/projectmanage/knowledgebase/getFileList`,
            method: 'POST',
            data: { parentId: this.state.pid, tableName: 'ta_uf_event_KnowledgeBase' }
        }).then(data => {
            // console.log(data)
            if (data.rc == 0) {
                this.setState({
                    dataSource: data.ret.fileList,
                    loading: false
                })
            }
        })
    }
    // modal保存
    onModalSave = () => {
        this.props.form.validateFieldsAndScroll((err, val) => {
            if (!err) {
                val.pid = this.state.pid
                this.props.onModalSave(val, this.state.pid)
            }
        });
    };
    // 筛选条件组件change事件
    getChangeValue = (value, e) => {
        let t = this;
        let params = {};
        params[value] = e.target.value;
        t.setState({ params });
        //form表单赋值-----改变文本域数字个数
        this.props.form.setFieldsValue({ [value]: e.target.value })
        this.addChange(value, e.target.value.length)


    }

    //新增改变tooplie的显示文字
    addChange = (v, num) => {
        this.state.arr.forEach(item => {
            if (item.paramName === v) {
                item.title = `${num}/${item.num}`
            }
        });
    }

    //上传
    onsc = (info) => {
        // console.log(info)
        this.setState({
            loading: true
        })
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功`);
            this.onsaveSc()



        } else if (info.file.status === 'error') {

            message.error(`${info.file.name} 上传失败.`);
            this.setState({
                loading: false
            })
        }
    }


    render() {
        let t = this;
        let { getFieldDecorator } = this.props.form;
        const { arr } = this.state
        const props1 = {
            name: 'file',
            action: '/pm-web/projectmanage/fileupload/dopost',

            headers: {
                authorization: 'authorization-text',
            },
            data: {
                pid: this.state.pid,
                tableName: "ta_uf_event_KnowledgeBase",
                uploadUser: PublicService.getCookie('nickName'),
            },
            multiple: true,
            showUploadList: true

        };

        const {spinLoading} = this.props;

        return (
            <div>
                <MyModal
                    {...t.props}
                    // className={myModalStyles.jlModal}
                    destroyOnClose={true}
                    modalBtnLoading={spinLoading}
                    width={800}
                    onModalSave={t.onModalSave}>
                    
                    <div style={{ width: '100%' }}>
                        <MyTable
                            pagination={false}
                            columns={this.state.columns}
                            dataSource={this.state.dataSource}
                        />
                        <Alert showIcon closable message="仅支持预览doc、docx、pdf、jpg、png、xls、xlsx,最大限制为20MB" type="warning" />
                        <div style={{ height: 5 }}></div>
                        <Form>
                            <Row gutter={48}>
                                {
                                    arr.map((item, index) => {
                                        if (item.type === 'TextArea') {
                                            return (
                                                <Col key={index} span={item.span || 24} offset={item.offset}>
                                                    <FormItem colon={false} label={item.label} style={{ marginBottom: 5 }}>

                                                        {
                                                            getFieldDecorator(item.paramName, {
                                                                initialValue: item.initialValue ? item.initialValue : '',
                                                                rules: item.rules || null
                                                            })(
                                                                <Tooltip
                                                                    trigger={['focus']}
                                                                    title={item.title}
                                                                    placement="topLeft"
                                                                    overlayClassName="numeric-input"
                                                                >
                                                                    <TextArea
                                                                        style={item.style}
                                                                        placeholder={item.placeholder}
                                                                        // onChange={this.onChange}
                                                                        rows={item.rows}
                                                                        maxLength={item.num}
                                                                        disabled={item.disabled} id={[item.paramName]}
                                                                        onChange={this.getChangeValue.bind(this, item.paramName)} size={config.size} style={item.style}
                                                                    />
                                                                </Tooltip>
                                                            )
                                                        }

                                                    </FormItem>
                                                </Col>
                                            )
                                        }
                                        if (item.type === 'Upload') {
                                            return (
                                                <Col key={index} span={item.span || 24} offset={item.offset}>
                                                    <FormItem colon={false} label={item.label} style={{ marginBottom: 5 }}>
                                                        {
                                                            getFieldDecorator(item.paramName, {
                                                                initialValue: item.initialValue || "",
                                                                rules: item.rules || null,
                                                            })(

                                                                <Upload {...props1} onChange={this.onsc} >
                                                                    <div style={{

                                                                        cursor: 'pointer'
                                                                    }}>
                                                                        <IconFont type="icon-wenjianshangchuan" style={{ fontSize: 25 }} />
                                                                         上传文件
                                                                       
                                                                    </div>



                                                                </Upload>

                                                            )
                                                        }
                                                    </FormItem>
                                                </Col>
                                            )
                                        }
                                    })
                                }

                            </Row>

                        </Form>



                    </div>


                </MyModal>

            </div>
        )
    }
}
export default Form.create()(Add_zs);
